<template>
  <div class="put-forward">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>余额提现</span>
      </div>
      <div class="balance">
        <p class="balance-con">我的余额: ¥456</p>
        <router-link to="/index/balanceRecord" tag="span"  class="forward-record">查看提现记录</router-link>
        <el-button size="small" type="success" round @click="doForward">我要提现</el-button>
        <p class="balance-tips" @click="doWeixin"><i class=" xq-icon icon-weixin"></i>点击此处绑定微信，再进行提现操作</p>
        <!--<p class="balance-tips">你已经绑定微信，可以进行提现操作</p>-->
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'PutForward',
  data () {
    return {
      currentMoney: 456
    }
  },
  methods: {
    doForward () {
      var _this = this
      this.$prompt(`最多可以提现 <span style="color: #409EFF;"> ${this.currentMoney} </span> 元，请输入提现金额`, '提现申请', {
        confirmButtonText: '确定',
        dangerouslyUseHTMLString: true,
        cancelButtonText: '取消',
        inputPattern: /\d/,
        inputErrorMessage: '请输入合法的金额数值'
      }).then(({ value }) => {
        if (parseFloat(value) > parseFloat(_this.currentMoney)) {
          this.$message.error('提现申请失败，提现金额不能超过现有余额，请重新提交！')
        } else {
          this.$message({
            type: 'success',
            message: '申请提交成功，你的提现金额是: ' + value + '元'
          })
        }
      })
    },
    doWeixin () {
      this.$alert('绑定微信账户', '绑定提现账户', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `绑定微信`
          })
        }
      })
    }
  }
}
</script>

<style lang="stylus" scoped>
  @import "../../assets/css/base.styl"
  .put-forward
    width: $width
    margin: 0 auto
    padding-left 170px
    box-sizing: border-box
    .balance
      text-align: center
      position: relative
      .forward-record
        font-size 12px
        color: #409EFF
        position: absolute
        right: 0
        top: 0
        cursor: pointer
      .el-button
        margin: 30px 0
      .balance-tips
        position: absolute
        cursor: pointer
        right: 0
        bottom 0
        font-size 14px
        color: #666
        .icon-weixin
          color: #49CF10
</style>
